<template>
  <van-row :gutter="[20, 20]" align="center" class="box">
    <div class="searchHot">大家都在搜</div>
    <van-col @click="handleClick(datas)" class="hot" v-for="datas in videoList" :key="datas">
      <span class="child">{{ datas }}</span>
    </van-col>
  </van-row>
</template>
<script setup lang="ts">
import { Row as vanRow, Col as vanCol } from 'vant'
import useSearchStore from '@/store/search-searchStore.ts'
import { onMounted, ref, computed } from 'vue';
import axios from 'axios';
import { IVideoItem } from '@/views/Home/components/home-video.vue'
import useHistoryStore from '@/store/search-historyStore.ts'





const store_search = useSearchStore()
const store_history = useHistoryStore()
const videoList = ref<string[]>([])
let hot: string[] = []



// 点击 “大家都在搜” 模块中的 盒子，调用函数
const handleClick = (datas: string) => {

  // 将输入框中的数据返回到 pinia 中的 search，以便显示符合的数据
  store_search.ChangeSearch(datas)

  // 将 datas 数据添加到历史记录中
  store_history.addHistory(datas)


  // 将点击的内容置顶在历史记录中
  if (store_history.History[datas]) {

    // 为了防止重新刷新页面，将dataList重新赋值为原来的数据，所以删除点击的历史记录
    delete store_history.History[datas]

    // 重新添加数据到 History 对象的最后面
    store_history.History[datas] = datas

  }
}

onMounted(async () => {
  const res = await axios({
    method: "get",
    url: '/videosList'
  })



  hot = res.data.result.map((element: IVideoItem) => {
    return element.author
  });


  // 抽取 arr 数组中随机抽取 num个 数据
  const sift = computed(() => {
    function FunSift(arr: string[], num: number) {
      const result: string[] = []
      const tempArr: string[] = arr.slice()

      for (let i = 0; i < num; i++) {
        const Random: number = Math.floor(Math.random() * tempArr.length)
        result.push(tempArr[Random])
        tempArr.splice(Random, 1)
      }

      return result
    }

    // 从 hot 数组中随机抽取 6个 数据
    return FunSift(hot, 4)
  })

  videoList.value = sift.value
})





</script>
<style scoped lang="scss">
.box {
  text-align: left;
  padding: 0 0 15px 0;
  background-color: white;
  height: 20vh;
  overflow: hidden;

  .searchHot {
    margin: 10px 0;
  }

  .searchHot {
    text-align: left;
    padding-left: 5vw;
    color: rgb(133, 133, 133);
    font-size: .9em;
    width: 100%;
  }

  .hot {
    margin: 10px 0 !important;
    padding-left: 10px !important;

    .child {
      padding: 5px 10px;
      border: solid rgb(133, 133, 133) 1px;
      font-size: .9em;
      border-radius: 500000px;
    }


  }
}
</style>@/store/search-historyStore@/store/search-searchStore